<template>
	<view class="coupons">
		<view class="gift_list">
			<view class="gift_list_title tui-skeleton-rect">{{$t(`page.index.coupons`)}}</view>
			<view class="gift_top" v-if="couponList.length == 1">
				<view class="gift_top_item acea-row row-center-wrapper flex-column tui-skeleton-fillet"
				v-for="(item,index) in couponList" :key="index" :class="item.isUse ? 'use' : '' " @click="getCoupon(item.id,index)">
					<text class="gift_num">${{item.money}}</text>
					<text class="gift_line">{{$t(`page.index.couponDesc`)}}${{item.minPrice}}</text>
				</view>
				<view class="gift_top_item acea-row row-center-wrapper flex-column tui-skeleton-fillet" @click="toCouponList()">
					<text class="gift_num">More</text>
					<text class="gift_line">{{$t(`page.index.coupons`)}}</text>
				</view>
			</view>
			<view class="gift_top" v-if="couponList.length == 2">
				<view class="gift_bt_item acea-row row-center-wrapper flex-column tui-skeleton-fillet"
				v-for="(item,index) in couponList" :key="index" :class="item.isUse ? 'use' : '' " @click="getCoupon(item.id,index)">
					<text class="gift_num">${{item.money}}</text>
					<text class="gift_line">{{$t(`page.index.orMore`)}}</text>
				</view>
				<view class="gift_bt_item acea-row row-center-wrapper flex-column tui-skeleton-fillet" @click="toCouponList()">
					<text class="gift_num">More</text>
					<text class="gift_line">{{$t(`page.index.coupons`)}}</text>
				</view>
			</view>
			<view class="gift_top flex-wrap three" v-if="couponList.length == 3">
				<view class="gift_top_item 
				acea-row row-center-wrapper 
				flex-column tui-skeleton-fillet"
				v-for="(item,index) in couponList" :key="index"
				:class="[index == 2 ? 'mt-22' : '',item.isUse ? 'use' : '']" @click="getCoupon(item.id,index)">
					<text class="gift_num">${{item.money}}</text>
					<text class="gift_line">{{$t(`page.index.couponDesc`)}}${{item.minPrice}}</text>
				</view>
				<view class="gift_top_item acea-row row-center-wrapper flex-column mt-22 tui-skeleton-fillet" @click="toCouponList()">
					<text class="gift_num">More</text>
					<text class="gift_line">{{$t(`page.index.coupons`)}}</text>
				</view>
			</view>
			<view v-if="couponList.length > 3">
				<view class="gift_top flex-wrap">
					<view class="acea-row row-center-wrapper flex-column tui-skeleton-fillet"
					v-for="(item,index) in couponList.slice(0,4)" :key="index" 
					:class="[item.isUse ? 'use' : '',index < 2 ?'gift_top_item' : 'gift_bt_item',index > 1 ? 'mt-22' : '']" 
					@click="getCoupon(item.id,index)">
						<text class="gift_num">${{item.money}}</text>
						<text class="gift_line" v-if="index < 2">{{$t(`page.index.couponDesc`)}}${{item.minPrice}}</text>
						<text class="gift_line" v-else>{{$t(`page.index.orMore`)}}</text>
					</view>
					<view class="gift_bt_item acea-row row-center-wrapper flex-column mt-22 tui-skeleton-fillet" @click="toCouponList()">
						<text class="gift_num">More</text>
						<text class="gift_line">{{$t(`page.index.coupons`)}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import {getCoupons,setCouponReceive} from '@/api/api.js';
	export default {
		data() {
			return {
				couponList:[{},{},{},{}]
			}
		},
		created() {
			this.getcouponList();
		},
		methods:{
			getcouponList() {
				let that = this;
				getCoupons({
					page: 1,
					limit: 6
				}).then(res => {
					that.$set(that, "couponList", res.data.list);
				}).catch(err => {
					return this.$util.Tips({
						title: err
					});
				});
			},
			getCoupon: function(id, index) {
				let that = this;
				//领取优惠券
				setCouponReceive(id).then(function(res) {
					that.$set(that.couponList[index], 'isUse', true);
					that.$util.Tips({
						title: '领取成功'
					});
				}, function(res) {
					return that.$util.Tips({
						title: res
					});
				})
			},
			toCouponList(){
				uni.navigateTo({
					url:'/pages/users/user_get_coupon/index'
				})
			}
		}
	}
</script>
<style lang="scss">
	.gift_list{
		margin-top:64rpx;
		&_title{
			font-size: 36rpx;
			font-weight: bold;
			color: #282828;
			margin-bottom: 44rpx;
		}
		.flex-wrap{
			flex-wrap: wrap;
		}
		.gift_top{
			display: flex;
			justify-content: space-between;
			.gift_top_item{
				width: 334rpx;
				height: 144rpx;
				@include main_bg_color(theme);
				border-radius: 16rpx;
				background-image: url(../../../static/images/coupon2.png);
				background-size: cover;
			}
			.gift_bt_item{
				width: 214rpx;
				height: 144rpx;
				@include main_bg_color(theme);
				border-radius: 16rpx;
				background-image: url(../../../static/images/coupon1.png);
				background-size: cover;
			}
			.mt-22{
				margin-top: 22rpx;
			}
			.gift_num{
				font-size: 60rpx;
				font-family: D-DIN-Bold, D-DIN;
				font-weight: bold;
				color: #FFFFFF;
				// padding-bottom: 12rpx;
			}
			.gift_line{
				font-size: 28rpx;
				font-family: MicrosoftYaHei;
				color: #FFFFFF;
			}
			.use{
				background-color: #ccc !important;
			}
		}
	}
</style>